<template>
  <div class="my-picker" id="test">
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted} from "vue";
import Popover from "@/lang/popover";

/**
 * 可复用吸附窗口
 *
 * 有些时候，弹出层的内容非常多，我们希望复用弹出层，
 *
 * 当我们点击不同按钮的时候，刷新弹出层的内容。
 *
 * 因为涉及的事件偏多，很容易产生冲突，这里先起个草稿，看看今后怎么利用起来
 */
const props = defineProps({
    // 默认侦听 shift 的长按事件，一般多选会设置在 shift
    key: {type: String, default: 'Shift'}
});

const dom = document.createElement('div');
dom.className = 'sea-popover';
dom.innerHTML = '<p>this is a container</p><p>this is a container</p><p>this is a container</p><p>this is a container</p>';

const popover = new Popover();
popover.dom = dom;
popover.hidden();
popover.ref = document.body;
popover.ref.append(dom);

/**
 * 打开气泡弹窗
 *
 * 如果有必要，需要避免事件冲突，大部分场景没啥关系
 *
 * @param evt
 */
const click = (evt) => {

    console.log(getComputedStyle(evt.target).zIndex);
    // popover.ref = evt.target;
    // const left = evt.clientX;
    // const top = evt.clientY + 16;
    // popover.open(left, top);

    if(evt.target.tagName === 'SPAN'){
        popover.ref = evt.target.parentNode;
    } else {
        popover.ref = evt.target;
    }
    popover.openOf('bottom', 'end')
}

/**
 * 关闭选项卡右击菜单
 *
 * 下拉列表展开之后，不论点击哪里，都应该关闭弹窗。
 * 如果点击的是弹窗里面的东西，就不应该关闭。
 */
const onWindowsMousedown = (evt) => {
    popover.onWindowsMousedown(evt);
}

onMounted(() => {
    document.addEventListener('mousedown', onWindowsMousedown);
})


onUnmounted(() => {
    document.removeEventListener('mousedown', onWindowsMousedown);
    dom.remove();
})

</script>

<style scoped>
</style>